import React from 'react';
import ReactDOM from 'react-dom';
// 静态组件
/* 
可以把html结构  当作一种数据类型
在html结构当中想要使用 变量的时候 需要用 {变量}这个{只能编写表达式} 类似于vue的 {{}}
类名  class需要写成 className
      for需要写成 htmlFor
行内样式 需要写成 {对象}的格式

react需要使用三元表达式 去实现 类似于vue的v-if功能
react需要使用map是实现  类似vue的 v-for  ;其实只要能在结构中放置一个由元素组件的数组即可
在结构中不能直接编写对象
v-html   :dangerouslySetInnerHTML={{ __html: str }}
*/
// import './jsx.css'
import style from './jsx.module.scss'
let h1 = <h1>hello world</h1>
let name = '珠峰'
let id = 'qqq';
let bol = true;
let cla = style.box2
let dis = false;
let ary = [111, 222, 333, 444, 555]
function vif(flag) {
  if (flag) {
    return <div style={{ color: 'red' }}>
      你好珠峰
  </div>
  }
  return null
}
let obj = { q: 213 }
let list = [<b key={111}>111</b>, 111, <b key={222}>222</b>, <b key={333}>333</b>]
let str = '<h1>88888</h1>'
// console.log(list[0])
let t = <h1 className='box'>hello</h1>
var h = /*#__PURE__*/ React.createElement("h1", { className: 'box' }, "hello world");

console.log(t, h)
function App() {

  return <div class='appbox'>
    <h1 id={id} className={`${style.box} ${cla}`}>hello world {name}</h1>
    <input type="checkbox" id='qqq1' /> <label htmlFor="qqq1">hhhh</label>
    {
      bol ?
        <div style={{ color: 'red', display: dis ? 'block' : 'none' }}>
          你好珠峰
        </div> :
        null
    }
    {
      vif(bol)
    }
    <ul>
      {
        ary.map(item => <li key={item}>{item}</li>)
      }
    </ul>

    {
      list
    }
    <div dangerouslySetInnerHTML={{ __html: str }}></div>
  </div>
}

ReactDOM.render(<App />, document.getElementById('root'))